模式其实和前面都是一样的，创建组件，创建store目录，关联reducer等等
目录结构如下
src/pages/detail/index.js内容如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import React, { Component } from 'react'
import { DetailWrapper, Header, Content } from './style'
import { connect } from 'react-redux'
class Detail extends Component {
render(){
const { title, content } = this.props
return (
<DetailWrapper>
<Header>{ title }</Header>
<Content dangerouslySetInnerHTML={{ __html: content }} />
</DetailWrapper>
)
}
}
const mapState = (state) => ({
title: state.get('detail').get('title'),
content: state.get('detail').get('content')
})
export default connect(mapState, null)(Detail);
src/pages/detail/store/reducer.js内容如下1
2
3
4
5
6
7
8
9
10
11
12
13
14import { fromJS } from 'immutable'
import * as constants from './constants'
const defaultState = fromJS({
title: '梨花落',
content: '.......'
});
export default (state = defaultState, action ) => {
switch(action.type){
default:
return state;
}
}
src/store/reducer.js内容如下1
2
3
4
5
6
7
8
9
10
11import { combineReducers } from 'redux-immutable'
import { reducer as herderReaducer } from '../common/header/store';
import { reducer as homeReaducer } from '../pages/home/store';
import { reducer as detailReaducer } from '../pages/detail/store';
const reducer = combineReducers({
header: herderReaducer,
home: homeReaducer,
detail: detailReaducer
})
export default reducer;